<template>
  <div class="news_container">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">

        <div class="left_item" :style="{height:tableHeight,overflow:'auto'}" id="tableBox">
          <div class="news_title">
            {{weekName}}
          </div>
          <div class="img_item">
            <!-- <scroller :on-refresh="reffor" :on-infinite="inffor" ref="scrfor"> -->
            <div class="block" v-for="item in weekList" :key="item.id" @click="weekDailyDetails(item.id)">
              <el-image :src="item.fakuImg"></el-image>
              <p class="text-1 news_name">{{item.title}}</p>
            </div>
            <!-- <div style="height:100px"> </div> -->
            <!-- </scroller> -->
          </div>

        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="news-right">
        <div class="right_item">
          <div class="info_item clearfix" v-for="item in dailyList" :key="item.id" @click="dayDetails(item)">

            <div>
              <div class="date">
                <h2>
                  {{item.createTime.substring(8,10)}}
                </h2>
                <p> {{item.createTime.substring(0,7)}}</p>
              </div>
            </div>

            <div>
              <div class="info">
                <h5>{{item.title}}</h5>
                <span>{{item.createTime}} </span>
                <p class="text-2">{{item.profiles}}</p>
              </div>
            </div>
          </div>
          <div class="pagination" v-if="total>0">
            <el-pagination :page-size="1" :hide-on-single-page="true" background layout="prev, pager, next" :total="total" @prev-click="current_change" @next-click="current_change" @current-change="current_change">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import path from '@/network'
export default {
  name: 'App',
  // 注册指令


  data () {
    return {
      title: '民生动态',
      count: 0,
      weekList: [],
      weekName: '周报',
      dailyName: '日报',
      total: 0,
      pagesize: 4,
      currentPage: 1,
      dailyList: [],
      pagemax: '',
      dailyId: '',
      weekId: '',
      // 表格高度
      tableHeight: "",
      // 数据总数
      tableCount: 0,
      // 表格数据列表
      tableList: [],
      // 是否加载中
      tableLoading: false,
      // 表格搜索条件


    };
  },

  created () {
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    // 动态计算表格的高度，200为屏幕内除了表格以外其他元素的高度，依实际情况而定
    this.tableHeight = windowHeight - 80 + "px";
  },
  beforeDestroy () {
    // 移除监听事件
    window.removeEventListener('scroll', this.onTableScroll)
  },

  mounted () {
    this.getSecondType(this.$route.query.firstId)
    this.$nextTick(() => {
      document.getElementById("tableBox").addEventListener('scroll', this.onTableScroll);
    })
  },
  methods: {
    onTableScroll () {
      var obj = document.getElementById("tableBox");
      var scrollHeight = obj.scrollHeight;
      var scrollTop = obj.scrollTop;
      var objHeight = obj.offsetHeight;
      // 100为阈值，可根据实际情况调整   
      if (scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length < this.tableCount) {
        this.tableLoading = true;
        this.currentPage++;
        setTimeout(() => {
          this.getLawList(this.weekId);
        }, 300)
      }
    },
    weekDailyDetails: function (id) {
      this.$router.push({ name: 'opinionNews_weekDetails', query: { secondId: id, firstId: this.$route.query.firstId, title: this.$route.query.title } })
    },
    dayDetails: function (item) {
      this.$router.push({ name: 'opinionNewsDetails', query: { secondId: item.id, firstId: this.$route.query.firstId, title: this.$route.query.title } })
    },

    //获取list
    getSecondType (id) {
      path.getSecondType(
        id
      ).then(res => {
        if (res.success === 0) {
          this.dailyName = res.rows[0].name;
          this.weekName = res.rows[1].name;

          this.dailyId = res.rows[0].id;
          this.weekId = res.rows[1].id;

          this.getLawList(this.dailyId)
          this.getLawList(this.weekId)
        }
      })
    },

    //获取list
    getLawList (id) {
      path.getLawList(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          this.pagemax = res.rows.total;
          if (id == 3) {
            this.dailyList = res.rows
            this.total = (res.total / this.pagesize);

          } else {
            this.tableCount = res.total;
            console.log(this.tableCount)
            if (this.currentPage == 1) {
              this.weekList = res.rows
            } else {
              this.weekList = this.weekList.concat(res.rows);

            }

          }
        }

      })
    },
    current_change: function (currentPage) {
      this.currentPage = currentPage;
      this.getLawList(this.dailyId)
    },
  }

}
</script>